<template>
  <div>
    <div class="submit-bar">
      <div class="bar-warp">
        <div class="bar-left">
          <van-checkbox
            v-model="isAllchecked"
            checked-color="#f46"
            @click="goodsAllchecked"
            >全选 ({{ checkedCount.length }})</van-checkbox
          >
        </div>
        <div class="bar-right">
          <div class="price" v-if="!editShow">
            <span>￥</span>{{ total.toFixed(2) }}
          </div>
          <div class="movedToFavorites" v-else><span>移入收藏夹</span></div>
          <div class="van-button" @click="coloseAnDel">
            {{ editShow ? "删除" : "结算" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  props: {
    // 控制底部按钮
    editShow: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters("m_cart", ["total", "checkedCount"]),
    ...mapState("m_cart", ["cateList"]),
    isAllchecked: {
      get() {
        return this.cateList.every((item) => item.goods_checked);
      },
      set(val) {
        this.updateAllGoodsState(val);
      },
    },
  },
  methods: {
    ...mapMutations("m_cart", ["updateAllGoodsState", "delGoodsChecked"]),
    onSubmit() {},
    goodsAllchecked() {
      this.$emit("goodsAllchecked");
    },
    // 结算或者删除
    coloseAnDel(e) {
      // 结算
      let settlement = e.target.innerText === "结算";
      // 判断用户是否选了商品
      if (settlement && this.checkedCount.length <= 0) {
        this.$toast({
          message: "请先选择商品哦",
          position: "200px",
        });
      }
      if (settlement && this.checkedCount.length > 0) {
        // 跳转订单页
        this.$router.push("/goodsorder");
      }

      // 删除
      if (e.target.innerText === "删除" && this.checkedCount.length <= 0) {
        this.$toast({
          message: "请先选择商品哦",
          position: "300px",
        });
      }
      if (e.target.innerText === "删除" && this.checkedCount.length > 0) {
        this.delGoodsChecked();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  z-index: 99;
  display: flex;
  align-items: center;
  .bar-warp {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .bar-left {
    }
    .bar-right {
      display: flex;
      align-items: center;
      color: #ff5577;
      .price {
        font-weight: bold;
        span {
          font-size: 12px;
        }
      }
      .movedToFavorites {
        width: auto;
        border-radius: 15px;
        height: 28px;
        font: size 16px;
        min-width: 62px;
        line-height: 28px;
        padding: 0 15px;
        border: 0.5px solid #ff5777;
      }
    }
    .van-button {
      width: 62px;
      height: 28px;
      background-color: #ff5577;
      line-height: 28px;
      border-radius: 15px;
      padding: 0;
      color: #fff;
      font-size: 16px;
      text-align: center;
      margin-left: 9px;
    }
  }
}
::v-deep .van-button--danger {
  width: 62px;
  height: 28px;
  background-color: #ff5577;
}
::v-deep .van-submit-bar__button--danger {
  background: -webkit-linear-gradient(left, #ff5577, #ff5577);
  background: linear-gradient(to right, #ff5577, #ff5577);
}
</style>